import './style.scss'
import {Link, Outlet, useLocation, useNavigate,} from "react-router-dom";
import {useEffect} from "react";

const TabItem = ({path, text}: { path: string; text: string }) => {
    const location = useLocation()
    return (
        <div className={`tab-item ${location.pathname === path ? 'tab-item-active' : ''}`}>
            <Link to={path}>{text}</Link>
        </div>
    )
}

function Account() {
    const navigator = useNavigate()
    useEffect(() => {
        if (localStorage.getItem('token')) {
            navigator('/home')
        }
    })
    const LOGIN_PATH = '/account/login'
    const REGISTER_PATH = '/account/register'
    return <div className="page account-page">
        <div className="tab">
            <TabItem path={LOGIN_PATH} text="登录"/>
            <TabItem path={REGISTER_PATH} text="注册"/>
        </div>
        <Outlet/>
    </div>
}

export default Account

